<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甘特图清单 - 职场观察者知识库</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Source+Han+Sans+CN:wght@300;400;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        'highlight-bg': '#EFF6FF',
                        'highlight-text': '#1E40AF',
                    }
                }
            }
        }
    </script>
    <style>
        :root {
            --theme-primary: #3B82F6;
            --theme-secondary: #10B981;
            --highlight-bg: #EFF6FF;
            --highlight-text: #1E40AF;
        }
        body {
            font-family: 'Source Han Sans CN', sans-serif;
            font-weight: 300;
        }
        h1, h2, h3, blockquote {
            font-family: 'Noto Serif SC', serif;
        }
        .magazine-page {
            width: 800px;
            background: #fefefe;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: auto;
        }
        .dark .magazine-page {
            background: #111827;
        }
        .dark p {
            color: #d1d5db;
        }
        .dark h1, .dark h2, .dark h3 {
            color: #f9fafb;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0 0;
            font-weight: 700;
            font-family: 'Noto Serif SC', serif;
        }
        .breathing-space {
            letter-spacing: 0.05em;
            line-height: 1.8;
        }
        .sop-table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1.5rem;
        }
        .sop-table th, .sop-table td {
            border: 1px solid #e5e7eb;
            padding: 0.75rem;
            text-align: left;
        }
        .sop-table th {
            background-color: #f9fafb;
            font-weight: 600;
        }
        .editable {
            min-height: 40px;
            padding: 0.5rem;
            border: 1px dashed #d1d5db;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
        }
        .editable:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            background-color: #f8fafc;
        }
        .sop-card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .sop-card h3 {
            color: #1e40af;
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        .method-explanation {
            background-color: #f0f9ff;
            border-left: 4px solid #3b82f6;
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0 0.5rem 0.5rem 0;
        }
        .input-hint {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }
        .save-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #10b981;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .save-indicator.show {
            opacity: 1;
        }
        .gantt-table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1.5rem;
        }
        .gantt-table th, .gantt-table td {
            border: 1px solid #e5e7eb;
            padding: 0.75rem;
            text-align: left;
        }
        .gantt-table th {
            background-color: #f9fafb;
            font-weight: 600;
        }
        .timeline-track {
            height: 24px;
            background-color: #f3f4f6;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            margin: 8px 0;
        }
        .timeline-progress {
            height: 100%;
            border-radius: 12px;
            transition: all 0.3s ease;
            position: relative;
            min-width: 20px;
        }
        .timeline-progress::after {
            content: attr(data-progress);
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 11px;
            color: white;
            font-weight: bold;
            text-shadow: 0 0 2px rgba(0,0,0,0.5);
        }
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .status-not-started {
            background-color: #f3f4f6;
            color: #6b7280;
        }
        .status-in-progress {
            background-color: #fef3c7;
            color: #92400e;
        }
        .status-completed {
            background-color: #d1fae5;
            color: #065f46;
        }
        .status-blocked {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .week-marker {
            position: absolute;
            height: 100%;
            width: 1px;
            background-color: #e5e7eb;
            top: 0;
        }
        .timeline-container {
            position: relative;
            padding-top: 10px;
            margin-bottom: 20px;
        }
        .week-labels {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 0.75rem;
            color: #6b7280;
        }
        .task-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .task-name {
            width: 180px;
            font-weight: 500;
            flex-shrink: 0;
        }
        .timeline-area {
            flex-grow: 1;
            position: relative;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 0.5rem;
            width: 500px;
            max-width: 90%;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4 md:p-8">
    <article class="magazine-page shadow-2xl p-8">
        <!-- 页面头部 -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold leading-tight mb-2 relative">
                <span class="absolute left-0 -top-2 bottom-2 w-1.5 bg-primary rounded-full"></span>
                <span class="ml-6">甘特图清单管理法</span>
            </h1>
            <p class="text-lg text-gray-600 dark:text-gray-400 font-light ml-6">可视化项目进度，高效管理时间安排</p>
        </header>

        <!-- 方法说明 -->
        <div class="method-explanation">
            <h3 class="font-bold text-primary mb-2">方法简介</h3>
            <p class="text-gray-700">甘特图是一种流行的项目管理工具，通过条形图直观展示项目活动的时间安排和进度，帮助您有效规划和跟踪项目进展。</p>
        </div>

        <!-- 导出按钮 -->
        <div class="flex justify-end mb-6 gap-3">
            <button id="export-pdf" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center">
                <i data-lucide="file-text" class="w-5 h-5 mr-2"></i>
                导出为PDF
            </button>
            <button id="export-doc" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center">
                <i data-lucide="download" class="w-5 h-5 mr-2"></i>
                导出为文档
            </button>
        </div>

        <!-- 甘特图清单内容 -->
        <div id="sop-content">
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="bar-chart-3" class="w-6 h-6 mr-2 text-primary"></i>
                    甘特图清单
                </h3>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                    <div id="project-name" class="editable" contenteditable="true" data-placeholder="请输入项目名称..."></div>
                    <div class="input-hint">例如：新产品开发、市场推广活动、年度规划等</div>
                </div>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">项目时间范围</label>
                    <div class="flex gap-4">
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 mb-1">开始日期</div>
                            <div id="start-date" class="editable" contenteditable="true" data-placeholder="YYYY-MM-DD"></div>
                        </div>
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 mb-1">结束日期</div>
                            <div id="end-date" class="editable" contenteditable="true" data-placeholder="YYYY-MM-DD"></div>
                        </div>
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 mb-1">总周期（周）</div>
                            <div id="total-weeks" class="editable" contenteditable="true" data-placeholder="8"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 事件分解部分 -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-3">
                        <h4 class="font-bold text-lg text-primary">Event Breakdown 事件分解</h4>
                        <button id="add-task" class="text-primary hover:text-blue-700 text-sm flex items-center">
                            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i>
                            添加任务
                        </button>
                    </div>
                    <table class="gantt-table">
                        <thead>
                            <tr>
                                <th width="5%">序号</th>
                                <th width="25%">任务名称</th>
                                <th width="15%">负责人</th>
                                <th width="10%">开始周</th>
                                <th width="10%">结束周</th>
                                <th width="10%">进度</th>
                                <th width="15%">依赖关系</th>
                                <th width="10%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="task-table-body">
                            <!-- 任务行将通过JavaScript动态添加 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 时间安排部分 -->
                <div class="mb-6">
                    <h4 class="font-bold text-lg text-primary mb-3">Schedule 时间安排</h4>
                    
                    <!-- 时间轴容器 -->
                    <div class="timeline-container">
                        <!-- 周标签 -->
                        <div class="week-labels" id="week-labels">
                            <!-- 周标签将通过JavaScript动态生成 -->
                        </div>
                        
                        <!-- 时间轴区域 -->
                        <div class="bg-white border border-gray-200 rounded-lg p-4">
                            <div id="timeline-tasks">
                                <!-- 任务时间条将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- 进度标记工具 -->
                    <div class="mt-4 p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-4 text-sm">
                            <span class="font-medium">标记进度:</span>
                            <button class="status-btn px-3 py-1 bg-gray-200 rounded hover:bg-gray-300" data-status="not-started">未开始</button>
                            <button class="status-btn px-3 py-1 bg-yellow-100 text-yellow-800 rounded hover:bg-yellow-200" data-status="in-progress">进行中</button>
                            <button class="status-btn px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200" data-status="completed">已完成</button>
                            <button class="status-btn px-3 py-1 bg-red-100 text-red-800 rounded hover:bg-red-200" data-status="blocked">受阻</button>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        <i data-lucide="check-circle" class="w-4 h-4 mr-1 text-green-500 inline"></i>
                        项目总结与备注
                    </label>
                    <div id="project-notes" class="editable" contenteditable="true" data-placeholder="记录项目关键节点、风险点或备注信息..."></div>
                    <div class="input-hint">记录项目关键节点、风险点或备注信息</div>
                </div>
            </div>
            
            <!-- 使用提示 -->
            <div class="sop-card bg-yellow-50 border border-yellow-200">
                <h3 class="text-lg font-bold text-yellow-800 flex items-center">
                    <i data-lucide="lightbulb" class="w-5 h-5 mr-2"></i>
                    使用提示
                </h3>
                <ul class="text-yellow-700 text-sm list-disc pl-5 space-y-1">
                    <li>首先明确项目整体时间范围和关键里程碑</li>
                    <li>将项目分解为具体可执行的任务，明确负责人和时间节点</li>
                    <li>识别任务之间的依赖关系，合理安排执行顺序</li>
                    <li>定期更新任务进度，保持甘特图的准确性</li>
                    <li>使用不同颜色标记不同状态的任务（如进行中、已完成、延期等）</li>
                    <li><strong>写的时候不要过于注重格式排版，而应注重内容</strong></li>
                </ul>
            </div>
        </div>

        <!-- 页面底部信息 -->
        <div class="flex items-center text-green-600 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
            <i data-lucide="check-circle" class="w-5 h-5 mr-2"></i>
            <span>职场观察者知识库 · 甘特图清单 SOP 表格</span>
        </div>
        
        <!-- 保存提示 -->
        <div id="save-indicator" class="save-indicator">
            <i data-lucide="check" class="w-4 h-4 mr-1 inline"></i>
            内容已自动保存
        </div>
    </article>

    <!-- 任务编辑模态框 -->
    <div id="task-modal" class="modal">
        <div class="modal-content">
            <h3 class="text-xl font-bold mb-4">编辑任务</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">任务名称</label>
                    <input type="text" id="edit-task-name" class="w-full p-2 border border-gray-300 rounded">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                    <input type="text" id="edit-task-assignee" class="w-full p-2 border border-gray-300 rounded">
                </div>
                <div class="flex gap-4">
                    <div class="flex-1">
                        <label class="block text-sm font-medium text-gray-700 mb-1">开始周</label>
                        <input type="number" id="edit-task-start" class="w-full p-2 border border-gray-300 rounded" min="1">
                    </div>
                    <div class="flex-1">
                        <label class="block text-sm font-medium text-gray-700 mb-1">结束周</label>
                        <input type="number" id="edit-task-end" class="w-full p-2 border border-gray-300 rounded" min="1">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">依赖关系</label>
                    <input type="text" id="edit-task-dependencies" class="w-full p-2 border border-gray-300 rounded" placeholder="前置任务编号，用逗号分隔">
                </div>
                <div class="flex justify-end gap-3 mt-6">
                    <button id="cancel-edit" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">取消</button>
                    <button id="save-task" class="px-4 py-2 bg-primary text-white rounded hover:bg-blue-700">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化Lucide图标
        lucide.createIcons();
        
        // 任务数据
        let tasks = [
            { id: 1, name: "需求分析", assignee: "张三", startWeek: 1, endWeek: 2, progress: "in-progress", dependencies: "" },
            { id: 2, name: "原型设计", assignee: "李四", startWeek: 2, endWeek: 4, progress: "not-started", dependencies: "1" },
            { id: 3, name: "开发实现", assignee: "王五", startWeek: 4, endWeek: 7, progress: "not-started", dependencies: "2" }
        ];
        
        let editingTaskId = null;
        const totalWeeks = 8; // 默认总周数
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 设置占位符文本
            setupEditableFields();
            
            // 初始化任务表格
            renderTaskTable();
            
            // 初始化时间轴
            renderTimeline();
            
            // 设置事件监听器
            setupEventListeners();
        });
        
        // 设置可编辑字段
        function setupEditableFields() {
            document.querySelectorAll('.editable').forEach(editable => {
                const placeholder = editable.getAttribute('data-placeholder');
                if (placeholder && !editable.textContent.trim()) {
                    editable.textContent = placeholder;
                    editable.classList.add('text-gray-400');
                }
                
                editable.addEventListener('focus', function() {
                    if (this.textContent === this.getAttribute('data-placeholder')) {
                        this.textContent = '';
                        this.classList.remove('text-gray-400');
                    }
                });
                
                editable.addEventListener('blur', function() {
                    if (!this.textContent.trim()) {
                        this.textContent = this.getAttribute('data-placeholder');
                        this.classList.add('text-gray-400');
                    }
                });
                
                // 自动保存功能
                editable.addEventListener('input', function() {
                    clearTimeout(this.saveTimeout);
                    this.saveTimeout = setTimeout(() => {
                        showSaveIndicator();
                    }, 1000);
                });
            });
        }
        
        // 渲染任务表格
        function renderTaskTable() {
            const tableBody = document.getElementById('task-table-body');
            tableBody.innerHTML = '';
            
            tasks.forEach(task => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${task.id}</td>
                    <td>
                        <div class="font-medium">${task.name}</div>
                        <span class="status-badge status-${task.progress}">${getStatusText(task.progress)}</span>
                    </td>
                    <td>${task.assignee}</td>
                    <td>第${task.startWeek}周</td>
                    <td>第${task.endWeek}周</td>
                    <td>${getProgressPercentage(task.startWeek, task.endWeek, task.progress)}%</td>
                    <td>${task.dependencies ? '任务 ' + task.dependencies : '无'}</td>
                    <td>
                        <button class="edit-task text-blue-500 hover:text-blue-700 mr-2" data-id="${task.id}">
                            <i data-lucide="edit" class="w-4 h-4"></i>
                        </button>
                        <button class="delete-task text-red-500 hover:text-red-700" data-id="${task.id}">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                    </td>
                `;
                tableBody.appendChild(row);
            });
            
            // 重新初始化图标
            lucide.createIcons();
        }
        
        // 渲染时间轴
        function renderTimeline() {
            // 生成周标签
            const weekLabels = document.getElementById('week-labels');
            weekLabels.innerHTML = '';
            
            for (let i = 1; i <= totalWeeks; i++) {
                const label = document.createElement('div');
                label.textContent = `第${i}周`;
                weekLabels.appendChild(label);
            }
            
            // 生成任务时间条
            const timelineTasks = document.getElementById('timeline-tasks');
            timelineTasks.innerHTML = '';
            
            tasks.forEach(task => {
                const taskRow = document.createElement('div');
                taskRow.className = 'task-row';
                
                const taskName = document.createElement('div');
                taskName.className = 'task-name';
                taskName.textContent = task.name;
                
                const timelineArea = document.createElement('div');
                timelineArea.className = 'timeline-area';
                
                const timelineTrack = document.createElement('div');
                timelineTrack.className = 'timeline-track';
                
                // 计算任务时间条的位置和宽度
                const startPercent = ((task.startWeek - 1) / totalWeeks) * 100;
                const widthPercent = ((task.endWeek - task.startWeek + 1) / totalWeeks) * 100;
                
                const timelineProgress = document.createElement('div');
                timelineProgress.className = `timeline-progress ${getStatusColor(task.progress)}`;
                timelineProgress.style.width = `${widthPercent}%`;
                timelineProgress.style.marginLeft = `${startPercent}%`;
                timelineProgress.setAttribute('data-progress', getStatusText(task.progress));
                
                timelineTrack.appendChild(timelineProgress);
                timelineArea.appendChild(timelineTrack);
                taskRow.appendChild(taskName);
                taskRow.appendChild(timelineArea);
                timelineTasks.appendChild(taskRow);
            });
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            // 添加任务按钮
            document.getElementById('add-task').addEventListener('click', function() {
                openTaskModal();
            });
            
            // 编辑任务按钮
            document.addEventListener('click', function(e) {
                if (e.target.closest('.edit-task')) {
                    const taskId = parseInt(e.target.closest('.edit-task').getAttribute('data-id'));
                    openTaskModal(taskId);
                }
            });
            
            // 删除任务按钮
            document.addEventListener('click', function(e) {
                if (e.target.closest('.delete-task')) {
                    const taskId = parseInt(e.target.closest('.delete-task').getAttribute('data-id'));
                    deleteTask(taskId);
                }
            });
            
            // 状态标记按钮
            document.querySelectorAll('.status-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const status = this.getAttribute('data-status');
                    // 在实际应用中，这里应该有一个选择任务的机制
                    // 这里简化处理，假设用户选择了第一个任务
                    if (tasks.length > 0) {
                        updateTaskStatus(1, status);
                    }
                });
            });
            
            // 模态框按钮
            document.getElementById('cancel-edit').addEventListener('click', closeTaskModal);
            document.getElementById('save-task').addEventListener('click', saveTask);
            
            // 导出按钮
            document.getElementById('export-pdf').addEventListener('click', exportToPDF);
            document.getElementById('export-doc').addEventListener('click', exportToDoc);
        }
        
        // 打开任务编辑模态框
        function openTaskModal(taskId = null) {
            const modal = document.getElementById('task-modal');
            const taskNameInput = document.getElementById('edit-task-name');
            const assigneeInput = document.getElementById('edit-task-assignee');
            const startInput = document.getElementById('edit-task-start');
            const endInput = document.getElementById('edit-task-end');
            const dependenciesInput = document.getElementById('edit-task-dependencies');
            
            if (taskId) {
                // 编辑现有任务
                const task = tasks.find(t => t.id === taskId);
                if (task) {
                    editingTaskId = taskId;
                    taskNameInput.value = task.name;
                    assigneeInput.value = task.assignee;
                    startInput.value = task.startWeek;
                    endInput.value = task.endWeek;
                    dependenciesInput.value = task.dependencies;
                }
            } else {
                // 添加新任务
                editingTaskId = null;
                taskNameInput.value = '';
                assigneeInput.value = '';
                startInput.value = '';
                endInput.value = '';
                dependenciesInput.value = '';
            }
            
            modal.style.display = 'flex';
        }
        
        // 关闭任务编辑模态框
        function closeTaskModal() {
            document.getElementById('task-modal').style.display = 'none';
        }
        
        // 保存任务
        function saveTask() {
            const taskName = document.getElementById('edit-task-name').value;
            const assignee = document.getElementById('edit-task-assignee').value;
            const startWeek = parseInt(document.getElementById('edit-task-start').value);
            const endWeek = parseInt(document.getElementById('edit-task-end').value);
            const dependencies = document.getElementById('edit-task-dependencies').value;
            
            if (!taskName || !assignee || !startWeek || !endWeek) {
                alert('请填写所有必填字段');
                return;
            }
            
            if (editingTaskId) {
                // 更新现有任务
                const taskIndex = tasks.findIndex(t => t.id === editingTaskId);
                if (taskIndex !== -1) {
                    tasks[taskIndex] = {
                        ...tasks[taskIndex],
                        name: taskName,
                        assignee: assignee,
                        startWeek: startWeek,
                        endWeek: endWeek,
                        dependencies: dependencies
                    };
                }
            } else {
                // 添加新任务
                const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
                tasks.push({
                    id: newId,
                    name: taskName,
                    assignee: assignee,
                    startWeek: startWeek,
                    endWeek: endWeek,
                    progress: 'not-started',
                    dependencies: dependencies
                });
            }
            
            // 重新渲染表格和时间轴
            renderTaskTable();
            renderTimeline();
            
            // 关闭模态框
            closeTaskModal();
            
            // 显示保存提示
            showSaveIndicator();
        }
        
        // 删除任务
        function deleteTask(taskId) {
            if (confirm('确定要删除这个任务吗？')) {
                tasks = tasks.filter(t => t.id !== taskId);
                renderTaskTable();
                renderTimeline();
                showSaveIndicator();
            }
        }
        
        // 更新任务状态
        function updateTaskStatus(taskId, status) {
            const taskIndex = tasks.findIndex(t => t.id === taskId);
            if (taskIndex !== -1) {
                tasks[taskIndex].progress = status;
                renderTaskTable();
                renderTimeline();
                showSaveIndicator();
            }
        }
        
        // 辅助函数：获取状态文本
        function getStatusText(status) {
            const statusMap = {
                'not-started': '未开始',
                'in-progress': '进行中',
                'completed': '已完成',
                'blocked': '受阻'
            };
            return statusMap[status] || '未知';
        }
        
        // 辅助函数：获取状态颜色
        function getStatusColor(status) {
            const colorMap = {
                'not-started': 'bg-gray-400',
                'in-progress': 'bg-yellow-500',
                'completed': 'bg-green-500',
                'blocked': 'bg-red-500'
            };
            return colorMap[status] || 'bg-gray-400';
        }
        
        // 辅助函数：计算进度百分比
        function getProgressPercentage(startWeek, endWeek, progress) {
            if (progress === 'completed') return 100;
            if (progress === 'not-started') return 0;
            if (progress === 'blocked') return 0;
            
            // 进行中 - 简化计算，实际应用中可以根据当前日期计算
            const totalWeeks = endWeek - startWeek + 1;
            const currentWeek = 2; // 假设当前是第2周
            const completedWeeks = Math.min(Math.max(currentWeek - startWeek + 1, 0), totalWeeks);
            return Math.round((completedWeeks / totalWeeks) * 100);
        }
        
        // 显示保存提示
        function showSaveIndicator() {
            const indicator = document.getElementById('save-indicator');
            indicator.classList.add('show');
            setTimeout(() => {
                indicator.classList.remove('show');
            }, 2000);
        }
        
        // 导出为PDF
        function exportToPDF() {
            const { jsPDF } = window.jspdf;
            
            // 获取要导出的内容
            const element = document.getElementById('sop-content');
            
            // 临时移除占位符文本
            document.querySelectorAll('.editable').forEach(editable => {
                if (editable.textContent === editable.getAttribute('data-placeholder')) {
                    editable.textContent = '';
                }
            });
            
            // 使用html2canvas将内容转换为图片
            html2canvas(element, {
                scale: 2,
                useCORS: true,
                logging: false
            }).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF('p', 'mm', 'a4');
                const imgWidth = 190; // 页面宽度
                const pageHeight = 277; // A4高度
                const imgHeight = canvas.height * imgWidth / canvas.width;
                let heightLeft = imgHeight;
                let position = 10;
                
                pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
                
                // 如果内容超过一页，添加新页面
                while (heightLeft >= 0) {
                    position = heightLeft - imgHeight + 10;
                    pdf.addPage();
                    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }
                
                pdf.save('甘特图清单表格.pdf');
                
                // 恢复占位符文本
                document.querySelectorAll('.editable').forEach(editable => {
                    if (!editable.textContent.trim()) {
                        editable.textContent = editable.getAttribute('data-placeholder');
                        editable.classList.add('text-gray-400');
                    }
                });
            });
        }

        // 导出为文档
        function exportToDoc() {
            // 创建一个临时的div来保存格式化内容
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = document.getElementById('sop-content').innerHTML;
            
            // 获取所有可编辑区域的内容
            const editables = tempDiv.querySelectorAll('[contenteditable="true"]');
            editables.forEach(editable => {
                // 移除contenteditable属性
                editable.removeAttribute('contenteditable');
                // 如果内容是占位符，清空
                if (editable.textContent === editable.getAttribute('data-placeholder')) {
                    editable.textContent = '';
                }
                // 添加样式以保持格式
                editable.style.border = '1px solid #ddd';
                editable.style.padding = '8px';
                editable.style.minHeight = '40px';
                editable.style.marginBottom = '10px';
            });
            
            // 创建HTML内容
            const htmlContent = `
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>甘特图清单表格</title>
                    <style>
                        body { 
                            font-family: 'Source Han Sans CN', sans-serif; 
                            margin: 20px;
                            color: #333;
                        }
                        h1, h2, h3 { 
                            font-family: 'Noto Serif SC', serif; 
                            color: #1e40af;
                        }
                        h1 { font-size: 24px; border-bottom: 2px solid #1e40af; padding-bottom: 10px; }
                        h3 { font-size: 18px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; }
                        .gantt-table { 
                            border-collapse: collapse; 
                            width: 100%; 
                            margin-bottom: 20px; 
                        }
                        .gantt-table th, .gantt-table td { 
                            border: 1px solid #ddd; 
                            padding: 12px; 
                            text-align: left; 
                            vertical-align: top;
                        }
                        .gantt-table th { 
                            background-color: #f2f2f2; 
                            font-weight: 600;
                        }
                        .sop-card { 
                            margin-bottom: 30px; 
                            padding: 20px; 
                            border: 1px solid #ddd; 
                            border-radius: 5px; 
                        }
                        .method-explanation {
                            background-color: #f0f9ff;
                            border-left: 4px solid #3b82f6;
                            padding: 15px;
                            margin-bottom: 20px;
                        }
                    </style>
                </head>
                <body>
                    <h1>甘特图清单</h1>
                    <div class="method-explanation">
                        <h3>方法简介</h3>
                        <p>甘特图是一种流行的项目管理工具，通过条形图直观展示项目活动的时间安排和进度，帮助您有效规划和跟踪项目进展。</p>
                    </div>
                    ${tempDiv.innerHTML}
                </body>
                </html>
            `;
            
            // 创建Blob并下载
            const blob = new Blob([htmlContent], { type: 'application/msword' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '甘特图清单表格.doc';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>